<!DOCTYPE html>
<html>
<head>
    <title>{$category.seo_title}</title>
    <meta name="keywords" content="{$category.seo_keywords}"/>
    <meta name="description" content="{$category.seo_description}">
    <include file="public@head"/>
    <link href="__TMPL__/public/assets/css/slippry/slippry.css" rel="stylesheet">
    <style>
        .caption-wraper {
            position: absolute;
            left: 50%;
            bottom: 2em;
        }

        .caption-wraper .caption {
            position: relative;
            left: -50%;
            background-color: rgba(0, 0, 0, 0.54);
            padding: 0.4em 1em;
            color: #fff;
            -webkit-border-radius: 1.2em;
            -moz-border-radius: 1.2em;
            -ms-border-radius: 1.2em;
            -o-border-radius: 1.2em;
            border-radius: 1.2em;
        }

        .tc-gridbox {
            margin: 0;
        }

        @media (max-width: 767px) {
            .caption-wraper {
                left: 0;
                bottom: 0.4em;
            }

            .caption-wraper .caption {
                left: 0;
                padding: 0.2em 0.4em;
                font-size: 0.92em;
                -webkit-border-radius: 0;
                -moz-border-radius: 0;
                -ms-border-radius: 0;
                -o-border-radius: 0;
                border-radius: 0;
            }
        }

    </style>
    <hook name="before_head_end"/>
</head>
<body class="body-white" style="position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top:0;
">
<include file="public@nav"/>
<div style="height: 100%">
    <if condition="$category['list_order']!=0">
        <ul id="home-slider" class="list-unstyled">
            <slides id="$category['list_order']">
                <li>
                    <img style="height: 100vh;width: 100vw" src="{:cmf_get_image_url($vo.image)}" alt=""/>
                </li>
            </slides>
        </ul>
        <else/>
        <div style="text-align: center;font-size: 40px;margin-top: 25%">
            <p>近期开放</p>
            <p>Coming soon</p>
        </div>
    </if>
</div>

<include file="public@footer"/>
<!-- /container -->
<include file="public@scripts"/>
<script src="__TMPL__/public/assets/js/slippry.min.js"></script>
<script>
    $(function () {
        var trans = ['fade', 'horizontal', 'vertical']
        var tran = trans[Math.floor(Math.random() * 2 + 1)]
        $(".list-unstyled").slippry({
            transition: tran,
            useCSS: true,
            captions: false,
            speed: 1000,
            pause: 2000,
            auto: true,
            preload: 'visible',
            adaptiveHeight: false,
            controls: true,
            page: false
        });
        $(".list-unstyled").show();
        $("#footer").css("animation-name", "footerInAn")
    });
    if ("{$category['list_order']}" == 1) {
        window.yuyue = "http://56052694-yuyue.m.weimob.com/56052694/16774/";
    }
    if ("{$category['list_order']}" == 4) {
        window.yuyue = "http://56052694-yuyue.m.weimob.com/56052694/16775/";
    }
    if ("{$category['list_order']}" == 2) {
        window.yuyue = "http://56052694-yuyue.m.weimob.com/56052694/16776/";
    }
</script>
<hook name="before_body_end"/>
</body>
</html>
